<!--
1、什么是路由：
  Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举；通俗点来讲，路由就是负责跳转页面的
2、vue+router构造单页面应用
  2-1、整个项目只有一个HTML文件
  2-2、缺点：不适合做SEO优化
  2-3、适合项目：后台管理系统
3、页面跳转
  3-1、在template写跳转
    <RouterLink to="/StuDemo51">跳转到购物车案例</RouterLink>
  3-2、在ts中书写跳转
    router.push			从A进入到B，也可以从B返回到A
    router.replace	从A进入到B，不可以从B返回到A
    router.go       go(-1)、go(0)、go(1)  返回、前进、刷新，等同于浏览器对象模型的go
    router.back			返回上一页
    router.forward  通过调用 history.forward() 在可能的情况下在历史中前进。相当于 router.go(1)。
    <button @click="toStuDemo50">跳转页面</button>
      const toStuDemo50 = () => {
        router.push('/StuDemo50')
      }
!createRouter（路由实例）
  定义: Vue Router 提供的工厂函数，用于创建路由实例
  作用: 它是 Vue 3 中路由的入口，用来初始化路由系统
  用法: 需要传入一个配置对象，其中包含路由模式（如 history 模式）和路由表。
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: routerList,
  })
!createWebHistory（路由模式）
  定义: 一个方法，用于指定路由的历史模式（HTML5 的 history 模式）
  作用：在 createRouter 中被使用，决定路由的导航方式。
  1 history模式   ----   http://localhost:5173/StuDemo50
    const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: routerList,
    });
  2、hash模式   ---- http://localhost:5173/#/StuDemo52
    const router = createRouter({
      history:createWebHashHistory(), //hash模式
      routes: routerList,
    });
  3、路由两种模式的区别
    3-1、展示形式不一样
      hash:带了一个#
      history:不带#号，颜值比hash高
    3-2、关于找不到路由的情况
      history：会发送一次get请求
      hash：不会额外发送一次get请求
    ps:一般使用history模式
!router-link(跳转页面)
定义：
  1、用于导航到不同的路由，是路由跳转的组件化方式。
  2、相当于 HTML 中的 <a> 标签，但提供了更强大的功能，比如动态生成 URL 和响应式导航
作用：
  1、生成一个超链接，点击后会根据配置跳转到指定的路由。
  2、保证了单页应用（SPA）中的导航不会刷新页面，而是通过 Vue Router 的方式动态加载组件
语法：
  写法1：<RouterLink to="/StuDemo51">跳转到购物车案例</RouterLink>  //是一个系统自带的组件，使用后自动创建一个a链接
  写法2：<RouterLink :to="{ path: '/StuDemo51' }">跳转到购物车案例</RouterLink>
  写法3：<RouterLink :to="{ name: 'dayStuDemo51' }">跳转到购物车案例</RouterLink>
  写法2的好处：
    <RouterLink :to="obj">跳转到购物车案例</RouterLink>
    const obj = { path: '/StuDemo51' }
  to：表示目标路由的链接
    1、简单使用		    to="/StuDemo51"
    2、使用命名路由		:to="{ name: 'dayStuDemo51' }"
    3、带参数和查询		:to="{ name: 'User', params: { id: 123 }, query: { ref: 'google' } }"
  replace：不能返回上一页和router.replace一样
    <RouterLink :to="obj" replace>跳转到购物车案例</RouterLink>
!router-view(视图组件)
定义：
  1、用于渲染与当前路由匹配的组件。
  2、是 Vue Router 中的主要占位符，用来显示对应路径的页面内容。
作用:
  1、当路由匹配时，动态加载并渲染对应的组件。
  2、多级路由时，可以嵌套多个<RouterView />，实现嵌套路由的渲染。
!router-link与router-view的关系
  1、<router-link>: 用于实现页面跳转，生成导航链接。
  2、<router-view>: 用于渲染目标路由对应的组件。
   配合使用：<router-link> 负责导航  <router-view> 负责渲染目标页面内容

!什么是路由导航守卫:
概念：用来拦截路由导航的工具。它可以在路由导航前、导航中或导航后执行特定的逻辑，从而控制路由访问、验证权限或执行其它操作
导航守卫的主要作用是：
	1、在页面跳转前检查用户权限。
	2、进行页面访问限制，比如用户未登录时跳转到登录页面。
	3、执行全局的页面前置或后置逻辑（如加载动画、日志记录等）。
导航守卫分类：
	1、全局守卫
	2、路由独享守卫
	3、组件内守卫
全局导航守卫:全局守卫会对所有路由进行拦截，适合处理全局逻辑，比如登录认证或全局加载状态。
	1、beforeEach： 在每次导航开始前触发，最常用。
	2、beforeResolve： 在路由被解析完成时触发（比组件内守卫更早）。
	3、afterEach： 在导航完成后触发（不能阻止导航）。
路由独享导航守卫:某个特定路由的守卫，仅在进入该路由时触发。它定义在路由配置中。
  beforeRouteEnter
组件内守卫:组件内守卫在对应的路由组件内定义，适合处理与该组件直接相关的逻辑。
	1、beforeRouteEnter： 在组件加载前触发，无法访问 this，因为组件实例尚未创建。
	2、beforeRouteUpdate： 在路由更新时触发（路径相同，参数不同）。
	3、beforeRouteLeave： 在导航离开该组件时触发，适合处理数据保存或确认操作

语法：
  beforeEach((to,from,next) => {
    执行逻辑
  })
-->
<template>
  <div id="wrap">
    <h1>路由页面跳转</h1>
    <!-- 写法1 -->
    <!-- <RouterLink to="/StuDemo51">跳转到购物车案例</RouterLink> -->
    <!-- 写法2 -->
    <!-- <RouterLink :to="{ path: '/StuDemo51' }">跳转到购物车案例</RouterLink> -->
    <RouterLink :to="obj" replace>跳转到购物车案例</RouterLink>
    <!-- 写法3 -->
    <!-- <RouterLink :to="{ name: 'dayStuDemo51' }">跳转到购物车案例</RouterLink> -->
    <button @click="toStuDemo50">跳转页面</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo52',
};
</script>

<script lang="ts" setup>
import router from '@/router';

const toStuDemo50 = () => {
  router.replace('/StuDemo50');
};

const obj = { path: '/StuDemo51' };
</script>

<style lang="scss"></style>
